import { Link } from "react-router-dom";

const ProductList = () => {
  // Mock product data
  const products = [
    { id: 1, name: "现代简约沙发", price: 2999, image: "sofa1" },
    { id: 2, name: "实木餐桌", price: 1899, image: "table1" },
    { id: 3, name: "舒适办公椅", price: 899, image: "chair1" },
    { id: 4, name: "双人床架", price: 3599, image: "bed1" },
    { id: 5, name: "书桌组合", price: 1599, image: "desk1" },
    { id: 6, name: "衣柜套装", price: 4299, image: "wardrobe1" },
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">我们的家具产品</h1>
      
      {/* Category Filter */}
      <div className="mb-8">
        <div className="flex flex-wrap gap-2">
          {["全部", "沙发", "餐桌椅", "床具", "办公家具", "储物"].map((category) => (
            <button 
              key={category}
              className={`px-4 py-2 rounded-full ${
                category === "全部" 
                  ? "bg-blue-500 text-white" 
                  : "bg-gray-200 text-gray-700 hover:bg-gray-300"
              }`}
            >
              {category}
            </button>
          ))}
        </div>
      </div>
      
      {/* Product Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        {products.map((product) => (
          <div key={product.id} className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="bg-gray-200 h-64 flex items-center justify-center">
              <span className="text-gray-500">商品图片: {product.image}</span>
            </div>
            <div className="p-4">
              <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
              <p className="text-gray-600 mb-4 line-clamp-2">
                高品质材料制作，设计时尚，舒适耐用，适合各种家居风格。
              </p>
              <div className="flex justify-between items-center">
                <span className="text-lg font-bold text-blue-600">¥{product.price}</span>
                <div className="flex gap-2">
                  <Link 
                    to={`/user/products/${product.id}`} 
                    className="bg-gray-200 text-gray-800 py-2 px-4 rounded hover:bg-gray-300 transition duration-300"
                  >
                    查看详情
                  </Link>
                  <Link 
                    to={`/user/customization/${product.id}`} 
                    className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300"
                  >
                    定制
                  </Link>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      
      {/* Pagination */}
      <div className="mt-12 flex justify-center">
        <nav className="flex gap-2">
          {[1, 2, 3, 4, 5].map((page) => (
            <button
              key={page}
              className={`w-10 h-10 rounded-full ${
                page === 1 
                  ? "bg-blue-500 text-white" 
                  : "bg-gray-200 text-gray-700 hover:bg-gray-300"
              }`}
            >
              {page}
            </button>
          ))}
        </nav>
      </div>
    </div>
  );
};

export default ProductList;